<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chain of responsibility</title>
</head>
<body>
<script>
    var NO_TOPIC=-1;
    var Topic;
    function Handler(s,t){
        this.successor=s || null;
        this.topic=t || 0;
    }
    Handler.prototype={
        handle:function(){
            if(this.successor){
                this.successor.handle()
            }
        },
        has:function(){
            return this.topic !=NO_TOPIC;
        }
    }
//    Handler只是接受2个参数，第一个是继任者（用于将处理请求传下去），第二个是传递层级（可以用于控制在某个层级下是否执行某个操作，也可以不用），Handler原型暴露了一个handle方法，这是实现该模式的重点，先来看看如何使用上述代码。
//    var app=new Handler({
//        handle:function(){
//            console.log('app handle');
//        }
//    },3);
//    var dialog=new Handler(app,1);
//    var button=new Handler(dialog,2);
//    button.handle();
//    改代码通过原型特性，调用代码从button.handle()->dialog.handle()->app.handle()->参数里的handle()，前三个都是调用原型的handle，最后才查找到传入的参数里的handle，然后输出结果，也就是说其实只有最后一层才处理。
//var app=new Handler({
//    handle:function(){
//        console.log('app handle');
//    }
//},3);
//    var dialog=new Handler(app,1);
//    dialog.handle=function(){
//        console.log('dialog before....')
//        //这里做具体的处理操作
//        console.log('dialog after。。。')
//    };
//    var button=new Handler(dialog,2);
//    button.handle();
    var app = new Handler({
        handle: function () {
            console.log('app handle');
        }
    }, 3);

    var dialog = new Handler(app, 1);
    dialog.handle = function () {
        console.log('dialog before ...')
        // 这里做具体的处理操作
        Handler.prototype.handle.call(this); //继续往上走
        console.log('dialog after ...')
    };

    var button = new Handler(dialog, 2);
    button.handle = function () {
        console.log('button before ...')
        // 这里做具体的处理操作
        Handler.prototype.handle.call(this);
        console.log('button after ...')
    };

    button.handle();
//换句话的意思说，调用原型的handle方法，来继续调用其继任者（也就是successor ）的handle方法，以下代码表现为：button/dialog/app三个对象定义的handle都会执行。
//通过代码的运行结果我们可以看出，如果想先自身处理，然后再调用继任者处理的话，就在末尾执行Handler.prototype.handle.call(this);代码，如果想先处理继任者的代码，就在开头执行Handler.prototype.handle.call(this);代码。
</script>
</body>
</html>